<template>
  <div class="home-img">
    <div class="hebao">
      <a :href="imgMap.hebao.url">
        <img :src="imgMap.hebao.img" :alt="imgMap.hebao.name" />
      </a>
    </div>
    <div class="tijian">
      <a :href="imgMap.tijian.url">
        <img :src="imgMap.tijian.img" :alt="imgMap.tijian.name" />
      </a>
    </div>
    <div class="yimei">
      <a :href="imgMap.yimei.url">
        <img :src="imgMap.yimei.img" :alt="imgMap.yimei.name" />
      </a>
    </div>
    <div class="yimiao">
      <a :href="imgMap.yimiao.url">
        <img :src="imgMap.yimiao.img" :alt="imgMap.yimiao.name" />
      </a>
    </div>
    <div class="yiyuan">
      <a :href="imgMap.yiyuan.url">
        <img :src="imgMap.yiyuan.img" :alt="imgMap.yiyuan.name" />
      </a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgMap: {
        hebao: {
          name: "在线核保",
          img: "/static/icon/home/hebao.png",
          url: "https://ljjkfwszyxgs.qiyukf.com/client?k=fd723dcd4455fd8d7adbff9af6b56d93&wp=1"
        },
        tijian: {
          name: "香港体检",
          img: "/static/icon/home/tijian.png",
          url: "/香港体检"
        },
        yimei: {
          name: "香港美容",
          img: "/static/icon/home/yimei.png",
          url: "/香港美容"
        },
        yimiao: {
          name: "香港育苗",
          img: "/static/icon/home/yimiao.png",
          url: "/香港育苗"
        },
        yiyuan: {
          name: "医院",
          img: "/static/icon/home/yiyuan.png",
          url: "yiyuan"
        }
      }
    };
  }
};
</script>
<style lang='scss' scoped>
.home-img {
  margin: 7px 9px 4px 10px;
  width: 301px;
  height: 150px;
  position: relative;
  div {
    position: absolute;
    z-index: 1;
    a {
      font-size: 0;
      img {
      left: 152px;
        width: 100%;
        height: 100%;
      }
    }
  }
  .hebao {
      top: 49px;
      left: 152px;
    width: 148px;
    height: 101px;
  }
  .tijian {
      z-index: 2;
      top: 49px;
      left: 152px;
    width: 104px;
    height: 68px;
  }
  .yimei {
      z-index: 2;
      top:0;
      left: 72px;
    width: 75px;
    height: 100px;
  }
  .yimiao {
      top:0;
      left: 152px;
    width: 148px;
    height: 44px;
  }
  .yiyuan {
      top:0;
      left: 0;
    width: 147px;
    height: 150px;
  }
}
</style>